<template>
  <main :class="`${className}`">
    <div class="flex-1 overflow-y-auto px-[16px]">
      <el-table
        ref="tableDom"
        v-loading="tableLoading"
        element-loading-text="拼命加载中"
        :data="tableData"
        height="100%"
        row-key="id"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
      >
        <el-table-column
          v-if="showSelection"
          type="selection"
          :width="40"
          :reserve-selection="true"
          :selectable="onSelectable"
        ></el-table-column>
        <el-table-column v-if="showIndex" label="序号" type="index" :width="60">
          <template slot-scope="{ $index }">
            <span>{{ (currentPage - 1) * pageSize + ($index + 1) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-for="item in tableColumns"
          :key="item.label"
          :type="item.type"
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          :min-width="item.minWidth"
          :fixed="item.fixed"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :class-name="item.className"
          :label-class-name="item.labelClassName"
          :sortable="item.sortable"
        >
          <template slot-scope="{ row, $index }">
            <slot v-if="item.slot" :name="item.slot" :row="row" :index="$index"></slot>
            <span v-else-if="item.KV_MAP">{{ $store.state.data.KV_MAP[item.KV_MAP][row[item.prop]] }}</span>
            <span v-else>{{ $isEmptyValue(row[item.prop]) ? "-" : row[item.prop] }}</span>
          </template>
        </el-table-column>
        <template slot="empty">
          <t-empty-data />
        </template>
      </el-table>
    </div>
    <div class="s-t-b inline-flex bg-[#fff] p-[16px]">
      <slot name="footerTip"></slot>
      <el-pagination
        class="flex-1 text-right"
        :current-page="currentPage"
        :total="total"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :layout="layout"
        :hide-on-single-page="false"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </main>
</template>

<script>
export default {
  name: "TablePagination",
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    tableColumns: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 每页显示条目个数
    pageSize: {
      type: Number,
      default: 10,
    },
    // 当前页数
    currentPage: {
      type: Number,
      default: 1,
    },
    // 总页数
    total: {
      type: Number,
      default: 0,
    },
    // 每页显示个数选择器的选项设置
    pageSizes: {
      type: Array,
      default: () => {
        return [10, 20, 50, 100];
      },
    },
    // 组件布局
    layout: {
      type: String,
      default: "total, sizes, prev, pager, next, jumper",
    },
    className: {
      type: String,
      default: "flex flex-col flex-1 overflow-y-auto pt-[16px]",
    },
    showSelection: {
      type: Boolean,
      default: true,
    },
    showIndex: {
      type: Boolean,
      default: true,
    },
    tableRowClassName: {
      type: Function,
    },
    tableLoading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      paginationSize: 10,
    };
  },
  methods: {
    handleSizeChange(val) {
      this.$emit("paginationChange", val, 1);
    },
    handleCurrentChange(val) {
      this.$emit("paginationChange", this.pageSize, val);
    },
    handleSelectionChange(val) {
      this.$emit("selectionChange", val);
    },
    handleSortChange(column, prop, order) {
      this.$emit("sortChange", column, prop, order);
    },
    clearSelection() {
      this.$refs["tableDom"].clearSelection();
    },
    // 是否禁用当前行
    onSelectable(row, index) {
      return row.disabled ? false : true;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep span.el-pagination__total {
  height: 32px;
  line-height: 32px;
}

::v-deep .el-pagination__sizes {
  margin: 0;
}

::v-deep tr.danger-row > td,
::v-deep tr.danger-row.hover-row > td {
  background-color: rgb(229 204 77 / 0.1) !important;
}

::v-deep tr.warning-row > td,
::v-deep tr.warning-row.hover-row > td {
  background-color: rgba($color: #f0bbbb, $alpha: 0.16) !important;
}

::v-deep .el-loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
